<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>组件解析 | vue-admin-doc</title>
    <meta name="description" content="vue element admin">
    <link rel="icon" href="/vue-admin/doc/logo.png">
    
    <link rel="preload" href="/vue-admin/doc/assets/css/0.styles.2d99cce7.css" as="style"><link rel="preload" href="/vue-admin/doc/assets/js/app.d64942cb.js" as="script"><link rel="preload" href="/vue-admin/doc/assets/js/2.abdc0c9d.js" as="script"><link rel="prefetch" href="/vue-admin/doc/assets/js/3.1009c37b.js"><link rel="prefetch" href="/vue-admin/doc/assets/js/4.7d50b7a1.js"><link rel="prefetch" href="/vue-admin/doc/assets/js/5.e95473fb.js"><link rel="prefetch" href="/vue-admin/doc/assets/js/6.1efa8625.js"><link rel="prefetch" href="/vue-admin/doc/assets/js/7.4fef4205.js"><link rel="prefetch" href="/vue-admin/doc/assets/js/8.601e5cd3.js"><link rel="prefetch" href="/vue-admin/doc/assets/js/9.2982823f.js">
    <link rel="stylesheet" href="/vue-admin/doc/assets/css/0.styles.2d99cce7.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/vue-admin/doc/" class="home-link router-link-active"><!----> <span class="site-name">vue-admin-doc</span></a> <div class="links" style="max-width:nullpx;"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/vue-admin/doc/guide/" class="nav-link router-link-active">指南</a></div><div class="nav-item"><a href="https://wangbin3162.github.io/docs/bin-ui/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  bin-ui
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="https://wangbin3162.gitee.io/vue-admin/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  预览
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="https://github.com/wangbin3162/bin-admin" target="_blank" rel="noopener noreferrer" class="nav-link external">
  2.0版本
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="https://github.com/wangbin3162/vue-admin" target="_blank" rel="noopener noreferrer" class="nav-link external">
  GitHub
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/vue-admin/doc/guide/" class="nav-link router-link-active">指南</a></div><div class="nav-item"><a href="https://wangbin3162.github.io/docs/bin-ui/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  bin-ui
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="https://wangbin3162.gitee.io/vue-admin/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  预览
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="https://github.com/wangbin3162/bin-admin" target="_blank" rel="noopener noreferrer" class="nav-link external">
  2.0版本
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="https://github.com/wangbin3162/vue-admin" target="_blank" rel="noopener noreferrer" class="nav-link external">
  GitHub
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav>  <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading open"><span>指南</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-admin/doc/guide/" class="sidebar-link">介绍</a></li><li><a href="/vue-admin/doc/guide/base.html" class="sidebar-link">一、基本准备</a></li><li><a href="/vue-admin/doc/guide/start.html" class="sidebar-link">二、开始实现</a></li><li><a href="/vue-admin/doc/guide/component.html" class="active sidebar-link">三、组件解析</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vue-admin/doc/guide/component.html#_1-基本资源" class="sidebar-link">1.基本资源</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vue-admin/doc/guide/component.html#图标" class="sidebar-link">图标</a></li><li class="sidebar-sub-header"><a href="/vue-admin/doc/guide/component.html#图表" class="sidebar-link">图表</a></li></ul></li><li class="sidebar-sub-header"><a href="/vue-admin/doc/guide/component.html#_2-基础工具" class="sidebar-link">2.基础工具</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vue-admin/doc/guide/component.html#common工具包" class="sidebar-link">common工具包</a></li><li class="sidebar-sub-header"><a href="/vue-admin/doc/guide/component.html#水波纹指令" class="sidebar-link">水波纹指令</a></li></ul></li><li class="sidebar-sub-header"><a href="/vue-admin/doc/guide/component.html#_3-富文本" class="sidebar-link">3.富文本</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vue-admin/doc/guide/component.html#常见的富文本" class="sidebar-link">常见的富文本</a></li><li class="sidebar-sub-header"><a href="/vue-admin/doc/guide/component.html#tinymce" class="sidebar-link">Tinymce</a></li><li class="sidebar-sub-header"><a href="/vue-admin/doc/guide/component.html#tinymce-vue" class="sidebar-link">tinymce-vue</a></li></ul></li><li class="sidebar-sub-header"><a href="/vue-admin/doc/guide/component.html#_4-components基础组件" class="sidebar-link">4.components基础组件</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vue-admin/doc/guide/component.html#buttonbar" class="sidebar-link">ButtonBar</a></li><li class="sidebar-sub-header"><a href="/vue-admin/doc/guide/component.html#charts" class="sidebar-link">Charts</a></li><li class="sidebar-sub-header"><a href="/vue-admin/doc/guide/component.html#divider" class="sidebar-link">Divider</a></li><li class="sidebar-sub-header"><a href="/vue-admin/doc/guide/component.html#drawer" class="sidebar-link">Drawer</a></li><li class="sidebar-sub-header"><a href="/vue-admin/doc/guide/component.html#label" class="sidebar-link">Label</a></li><li class="sidebar-sub-header"><a href="/vue-admin/doc/guide/component.html#scrollpane" class="sidebar-link">ScrollPane</a></li><li class="sidebar-sub-header"><a href="/vue-admin/doc/guide/component.html#splitpane" class="sidebar-link">SplitPane</a></li><li class="sidebar-sub-header"><a href="/vue-admin/doc/guide/component.html#titlebar" class="sidebar-link">TitleBar</a></li><li class="sidebar-sub-header"><a href="/vue-admin/doc/guide/component.html#layout" class="sidebar-link">Layout</a></li></ul></li></ul></li><li><a href="/vue-admin/doc/guide/third.html" class="sidebar-link">四、第三方库</a></li></ul></div></li></ul> </div> <div class="page"> <div class="content"><h1 id="组件解析"><a href="#组件解析" aria-hidden="true" class="header-anchor">#</a> 组件解析</h1> <h2 id="_1-基本资源"><a href="#_1-基本资源" aria-hidden="true" class="header-anchor">#</a> 1.基本资源</h2> <h3 id="图标"><a href="#图标" aria-hidden="true" class="header-anchor">#</a> 图标</h3> <p>本项目 Icon 图标，可以到 <a href="https://www.iconfont.cn/" target="_blank" rel="noopener noreferrer">iconfont<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 上选择并生成自己的业务图标库，再进行使用。</p> <p><a href="https://wangbin3162.github.io/vue-admin-doc/font-demo/demo_fontclass.html" target="_blank" rel="noopener noreferrer">本项目icon参考<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p> <p><strong>font-class引用</strong></p> <p>在iconfont中挑选图标库后，下载font-class包，解压后会有fontclass代码</p> <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p> <p>与unicode使用方式相比，具有如下特点：</p> <p>兼容性良好，支持ie8+，及所有现代浏览器。 相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。 因为使用class来定义图标，
所以当要替换图标时，只需要修改class里面的unicode引用。 不过因为本质上还是使用的字体，所以多色图标还是不支持的。 使用步骤如下：</p> <p>第一步：拷贝项目下面生成的fontclass代码： //at.alicdn.com/t/font_8d5l8fzk5b87iudi.css</p> <p>第二步：挑选相应图标并获取类名，应用于页面：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>iconfont icon-xxx<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h3 id="图表"><a href="#图表" aria-hidden="true" class="header-anchor">#</a> 图表</h3> <p>管理后台图表也是常见得需求。这里图表就只推荐 ECharts，功能齐全，社区 demo 也丰富 <a href="https://gallery.echartsjs.com/explore.html" target="_blank" rel="noopener noreferrer">gallery<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>。</p> <p>我还是那个观点，大部分插件建议大家还是自己用 vue 来封装就好了，真的很简单。
ECharts 支持 webpack 引入，图省事可以将 ECharts 整个引入 var echarts = require('echarts') 不过 ECharts 还是不小的，
如果只使用它小部分功能或者图表类型的话建议按需引入。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 按需引入 引入 ECharts 主模块</span>
<span class="token keyword">var</span> echarts <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'echarts/lib/echarts'</span><span class="token punctuation">)</span>
<span class="token comment">// 引入柱状图</span>
<span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'echarts/lib/chart/bar'</span><span class="token punctuation">)</span>
<span class="token comment">// 引入提示框和标题组件</span>
<span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'echarts/lib/component/tooltip'</span><span class="token punctuation">)</span>
<span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'echarts/lib/component/title'</span><span class="token punctuation">)</span>

<span class="token comment">//全部引入</span>
<span class="token keyword">var</span> echarts <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'echarts'</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p>接下来我们就要在 vue 中声明初始化 ECharts 了。因为 ECharts 初始化必须绑定 dom，
所以我们只能在 vue 的 mounted 生命周期里进行初始化。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    <span class="token function">mounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">initCharts</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
      <span class="token function">initCharts</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>chart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>$el<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setOptions</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token function">setOptions</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>chart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
          title<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            text<span class="token punctuation">:</span> <span class="token string">'ECharts 入门示例'</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          tooltip<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
          xAxis<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            data<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">&quot;衬衫&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;羊毛衫&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;雪纺衫&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;裤子&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;高跟鞋&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;袜子&quot;</span><span class="token punctuation">]</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          yAxis<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
          series<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
            name<span class="token punctuation">:</span> <span class="token string">'销量'</span><span class="token punctuation">,</span>
            type<span class="token punctuation">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
            data<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">36</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">]</span>
          <span class="token punctuation">}</span><span class="token punctuation">]</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br></div></div><p>就这样简单，ECharts 就配置完成了，这时候你想说我的 data 是远程获取的，或者说我动态改变 ECharts 的配置该怎么办呢？
我们可以通过 watch 来触发 setOptions 方法</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    <span class="token comment">//第一种 watch options变化 利用vue的深度 watcher，options 一有变化就重新setOption</span>
    watch<span class="token punctuation">:</span> <span class="token punctuation">{</span>
      options<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        <span class="token function">handler</span><span class="token punctuation">(</span><span class="token parameter">options</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token keyword">this</span><span class="token punctuation">.</span>chart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>options<span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        deep<span class="token punctuation">:</span> <span class="token boolean">true</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">//第二种 只watch 数据的变化 只有数据变化时触发ECharts</span>
    watch<span class="token punctuation">:</span> <span class="token punctuation">{</span>
      <span class="token function">seriesData</span><span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setOptions</span><span class="token punctuation">(</span><span class="token punctuation">{</span>series<span class="token punctuation">:</span>val<span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><h2 id="_2-基础工具"><a href="#_2-基础工具" aria-hidden="true" class="header-anchor">#</a> 2.基础工具</h2> <h3 id="common工具包"><a href="#common工具包" aria-hidden="true" class="header-anchor">#</a> common工具包</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">/**
 * 时间格式化
 * @param time
 * @param cFormat
 * @returns {*}
 */</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">parseTime</span> <span class="token punctuation">(</span><span class="token parameter">time<span class="token punctuation">,</span> cFormat</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>arguments<span class="token punctuation">.</span>length <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token keyword">null</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">const</span> format <span class="token operator">=</span> cFormat <span class="token operator">||</span> <span class="token string">'{y}-{m}-{d} {h}:{i}:{s}'</span>
  <span class="token keyword">let</span> date
  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> time <span class="token operator">===</span> <span class="token string">'object'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    date <span class="token operator">=</span> time
  <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token string">''</span> <span class="token operator">+</span> time<span class="token punctuation">)</span><span class="token punctuation">.</span>length <span class="token operator">===</span> <span class="token number">10</span><span class="token punctuation">)</span> time <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>time<span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">1000</span>
    date <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span>time<span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">const</span> formatObj <span class="token operator">=</span> <span class="token punctuation">{</span>
    y<span class="token punctuation">:</span> date<span class="token punctuation">.</span><span class="token function">getFullYear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    m<span class="token punctuation">:</span> date<span class="token punctuation">.</span><span class="token function">getMonth</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">,</span>
    d<span class="token punctuation">:</span> date<span class="token punctuation">.</span><span class="token function">getDate</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    h<span class="token punctuation">:</span> date<span class="token punctuation">.</span><span class="token function">getHours</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    i<span class="token punctuation">:</span> date<span class="token punctuation">.</span><span class="token function">getMinutes</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    s<span class="token punctuation">:</span> date<span class="token punctuation">.</span><span class="token function">getSeconds</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    a<span class="token punctuation">:</span> date<span class="token punctuation">.</span><span class="token function">getDay</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
  <span class="token comment">// eslint-disable-next-line</span>
  <span class="token keyword">const</span> time_str <span class="token operator">=</span> format<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex">/{(y|m|d|h|i|s|a)+}/g</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">result<span class="token punctuation">,</span> key</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">let</span> value <span class="token operator">=</span> formatObj<span class="token punctuation">[</span>key<span class="token punctuation">]</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>key <span class="token operator">===</span> <span class="token string">'a'</span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token punctuation">[</span><span class="token string">'一'</span><span class="token punctuation">,</span> <span class="token string">'二'</span><span class="token punctuation">,</span> <span class="token string">'三'</span><span class="token punctuation">,</span> <span class="token string">'四'</span><span class="token punctuation">,</span> <span class="token string">'五'</span><span class="token punctuation">,</span> <span class="token string">'六'</span><span class="token punctuation">,</span> <span class="token string">'日'</span><span class="token punctuation">]</span><span class="token punctuation">[</span>value <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">]</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>result<span class="token punctuation">.</span>length <span class="token operator">&gt;</span> <span class="token number">0</span> <span class="token operator">&amp;&amp;</span> value <span class="token operator">&lt;</span> <span class="token number">10</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      value <span class="token operator">=</span> <span class="token string">'0'</span> <span class="token operator">+</span> value
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> value <span class="token operator">||</span> <span class="token number">0</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token comment">// eslint-disable-next-line</span>
  <span class="token keyword">return</span> time_str
<span class="token punctuation">}</span>

<span class="token comment">/**
 * 数组插入函数
 * @param arr 数组
 * @param val 插入值
 * @param compare 比较函数,传入,判断是否存在插入值
 * @param maxLen 最大插入个数,不传即为max
 */</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">insertArray</span> <span class="token punctuation">(</span><span class="token parameter">arr<span class="token punctuation">,</span> val<span class="token punctuation">,</span> compare<span class="token punctuation">,</span> maxLen</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> index <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">findIndex</span><span class="token punctuation">(</span>compare<span class="token punctuation">)</span>
  <span class="token comment">// 如果当前插入的值就在第一个位置则啥都不做</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>index <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span>
  <span class="token punctuation">}</span>
  <span class="token comment">// 如果数组中有这条数据则删除这个</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>index <span class="token operator">&gt;</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    arr<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span>index<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
  arr<span class="token punctuation">.</span><span class="token function">unshift</span><span class="token punctuation">(</span>val<span class="token punctuation">)</span><span class="token comment">// 插入数据</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>maxLen <span class="token operator">&amp;&amp;</span> arr<span class="token punctuation">.</span>length <span class="token operator">&gt;</span> maxLen<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    arr<span class="token punctuation">.</span><span class="token function">pop</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token comment">// 如果数组超出，则把最后一个给推出</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token comment">/**
 *  删除数据
 * @param arr 数组
 * @param compare 比较函数,传入,判断是否存在插入值
 */</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">deleteFromArray</span> <span class="token punctuation">(</span><span class="token parameter">arr<span class="token punctuation">,</span> compare</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> index <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">findIndex</span><span class="token punctuation">(</span>compare<span class="token punctuation">)</span>
  <span class="token comment">// 如果数组中有这条数据则删除这个</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>index <span class="token operator">&gt;</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    arr<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span>index<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token comment">/**
 * 节流函数，延迟执行函数
 * @param func 延迟的函数类型
 * @param delay 延迟毫秒数
 * @return {Function} 返回一个执行函数
 */</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">debounce</span> <span class="token punctuation">(</span><span class="token parameter">func<span class="token punctuation">,</span> delay</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">let</span> timer
  <span class="token keyword">return</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token operator">...</span>args</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>timer<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token function">clearTimeout</span><span class="token punctuation">(</span>timer<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
    timer <span class="token operator">=</span> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token function">func</span><span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> args<span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> delay<span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token comment">/**
 * 洗牌函数
 * @param arr 需要洗牌的数组
 * @return { 打乱次序的新数组 }
 */</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">shuffle</span> <span class="token punctuation">(</span><span class="token parameter">arr</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">let</span> newArr <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token comment">// 复制一个新数组</span>
  <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> newArr<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">let</span> j <span class="token operator">=</span> <span class="token function">getRandomInt</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> i<span class="token punctuation">)</span><span class="token comment">// 在0-当前循环的位置随机一个位置做交换</span>
    <span class="token keyword">let</span> t <span class="token operator">=</span> newArr<span class="token punctuation">[</span>i<span class="token punctuation">]</span>
    newArr<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">=</span> newArr<span class="token punctuation">[</span>j<span class="token punctuation">]</span>
    newArr<span class="token punctuation">[</span>j<span class="token punctuation">]</span> <span class="token operator">=</span> t
  <span class="token punctuation">}</span>
  <span class="token keyword">return</span> newArr
<span class="token punctuation">}</span>

<span class="token comment">/**
 * 在某个区间随机一个整数
 * @param min 最小值
 * @param max 最大值
 * @return {number}
 */</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">getRandomInt</span> <span class="token punctuation">(</span><span class="token parameter">min<span class="token punctuation">,</span> max</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token punctuation">(</span>max <span class="token operator">-</span> min <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">+</span> min<span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token comment">/**
 * 清空回车换行符
 * @param str
 * @returns {*}
 */</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">replaceReturn</span> <span class="token punctuation">(</span><span class="token parameter">str</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> str <span class="token operator">?</span> str<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex">/(↵)+|(\n)+|(\r\n)+/g</span><span class="token punctuation">,</span> <span class="token string">''</span><span class="token punctuation">)</span> <span class="token punctuation">:</span> <span class="token string">''</span>
<span class="token punctuation">}</span>

<span class="token comment">/**
 * 返回一个水印canvas
 */</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">getWaterMark</span> <span class="token punctuation">(</span><span class="token parameter">str</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">var</span> waterMarkText <span class="token operator">=</span> str <span class="token operator">||</span> <span class="token string">'Kingdee'</span>

  <span class="token keyword">var</span> canvas <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'canvas'</span><span class="token punctuation">)</span>
  <span class="token keyword">var</span> ctx <span class="token operator">=</span> canvas<span class="token punctuation">.</span><span class="token function">getContext</span><span class="token punctuation">(</span><span class="token string">'2d'</span><span class="token punctuation">)</span>
  canvas<span class="token punctuation">.</span>width <span class="token operator">=</span> canvas<span class="token punctuation">.</span>height <span class="token operator">=</span> <span class="token number">100</span>
  ctx<span class="token punctuation">.</span>textAlign <span class="token operator">=</span> <span class="token string">'center'</span>
  ctx<span class="token punctuation">.</span>textBaseline <span class="token operator">=</span> <span class="token string">'middle'</span>
  ctx<span class="token punctuation">.</span>globalAlpha <span class="token operator">=</span> <span class="token number">0.08</span>
  ctx<span class="token punctuation">.</span>font <span class="token operator">=</span> <span class="token string">'20px Microsoft Yahei'</span>
  ctx<span class="token punctuation">.</span><span class="token function">translate</span><span class="token punctuation">(</span><span class="token number">50</span><span class="token punctuation">,</span> <span class="token number">50</span><span class="token punctuation">)</span>
  ctx<span class="token punctuation">.</span><span class="token function">rotate</span><span class="token punctuation">(</span><span class="token operator">-</span>Math<span class="token punctuation">.</span><span class="token constant">PI</span> <span class="token operator">/</span> <span class="token number">4</span><span class="token punctuation">)</span>
  ctx<span class="token punctuation">.</span><span class="token function">fillText</span><span class="token punctuation">(</span>waterMarkText<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span>
  <span class="token keyword">return</span> canvas
<span class="token punctuation">}</span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br><span class="line-number">84</span><br><span class="line-number">85</span><br><span class="line-number">86</span><br><span class="line-number">87</span><br><span class="line-number">88</span><br><span class="line-number">89</span><br><span class="line-number">90</span><br><span class="line-number">91</span><br><span class="line-number">92</span><br><span class="line-number">93</span><br><span class="line-number">94</span><br><span class="line-number">95</span><br><span class="line-number">96</span><br><span class="line-number">97</span><br><span class="line-number">98</span><br><span class="line-number">99</span><br><span class="line-number">100</span><br><span class="line-number">101</span><br><span class="line-number">102</span><br><span class="line-number">103</span><br><span class="line-number">104</span><br><span class="line-number">105</span><br><span class="line-number">106</span><br><span class="line-number">107</span><br><span class="line-number">108</span><br><span class="line-number">109</span><br><span class="line-number">110</span><br><span class="line-number">111</span><br><span class="line-number">112</span><br><span class="line-number">113</span><br><span class="line-number">114</span><br><span class="line-number">115</span><br><span class="line-number">116</span><br><span class="line-number">117</span><br><span class="line-number">118</span><br><span class="line-number">119</span><br><span class="line-number">120</span><br><span class="line-number">121</span><br><span class="line-number">122</span><br><span class="line-number">123</span><br><span class="line-number">124</span><br><span class="line-number">125</span><br><span class="line-number">126</span><br><span class="line-number">127</span><br><span class="line-number">128</span><br><span class="line-number">129</span><br><span class="line-number">130</span><br><span class="line-number">131</span><br><span class="line-number">132</span><br><span class="line-number">133</span><br><span class="line-number">134</span><br><span class="line-number">135</span><br><span class="line-number">136</span><br><span class="line-number">137</span><br><span class="line-number">138</span><br><span class="line-number">139</span><br><span class="line-number">140</span><br><span class="line-number">141</span><br><span class="line-number">142</span><br><span class="line-number">143</span><br><span class="line-number">144</span><br><span class="line-number">145</span><br><span class="line-number">146</span><br><span class="line-number">147</span><br><span class="line-number">148</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">/**
 * Created by wangbin on 2018/2.27.
 */</span>

<span class="token comment">/* 匹配合法文件相对路径 */</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">validateFilePath</span><span class="token punctuation">(</span><span class="token parameter">str</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> reg <span class="token operator">=</span> <span class="token regex">/^((\w+\/)*\w+\.html)$/</span>
  <span class="token keyword">return</span> reg<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token comment">/* 匹配合法文件相对路径 */</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">validateFilePath2</span><span class="token punctuation">(</span><span class="token parameter">str</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> reg <span class="token operator">=</span> <span class="token regex">/^((\w+\/)*[a-zA-Z0-9+&amp;%$#=~_-]+(\.\w+)*)$/</span>
  <span class="token keyword">return</span> reg<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token comment">/* 小写字母 */</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">validateLowerCase</span><span class="token punctuation">(</span><span class="token parameter">str</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> reg <span class="token operator">=</span> <span class="token regex">/^[a-z]+$/</span>
  <span class="token keyword">return</span> reg<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token comment">/* 大写字母 */</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">validateUpperCase</span><span class="token punctuation">(</span><span class="token parameter">str</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> reg <span class="token operator">=</span> <span class="token regex">/^[A-Z]+$/</span>
  <span class="token keyword">return</span> reg<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token comment">/* 大小写字母 */</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">validateAlphabets</span><span class="token punctuation">(</span><span class="token parameter">str</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> reg <span class="token operator">=</span> <span class="token regex">/^[A-Za-z]+$/</span>
  <span class="token keyword">return</span> reg<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token comment">/* 是否带有小数 */</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">isDecimal</span><span class="token punctuation">(</span><span class="token parameter">strValue</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">var</span> objRegExp <span class="token operator">=</span> <span class="token regex">/^\d+\.\d+$/</span>
  <span class="token keyword">return</span> objRegExp<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>strValue<span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token comment">/* 校验是否中文名称组成 */</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">ischina</span><span class="token punctuation">(</span><span class="token parameter">str</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">var</span> reg <span class="token operator">=</span> <span class="token regex">/^[\u4E00-\u9FA5]{2,64}$/</span>
  <span class="token keyword">return</span> reg<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token comment">/* 匹配非中文编码 */</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">isNonChinese</span><span class="token punctuation">(</span><span class="token parameter">str</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> reg <span class="token operator">=</span> <span class="token regex">/^\w+$/</span>
  <span class="token keyword">return</span> reg<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token comment">/* 校验正整数 */</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">isInteger</span><span class="token punctuation">(</span><span class="token parameter">str</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">var</span> reg <span class="token operator">=</span> <span class="token regex">/^\d+$/</span>
  <span class="token keyword">return</span> reg<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token comment">/* 校验电话码格式 */</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">isTelCode</span><span class="token punctuation">(</span><span class="token parameter">str</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">var</span> reg <span class="token operator">=</span> <span class="token regex">/^((0\d{2,3}-\d{7,8})|(1[35874]\d{9}))$/</span>
  <span class="token keyword">return</span> reg<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token comment">/* 校验邮件地址是否合法 */</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">isEmail</span><span class="token punctuation">(</span><span class="token parameter">str</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">var</span> reg <span class="token operator">=</span> <span class="token regex">/^([a-zA-Z0-9_\\.-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/</span>
  <span class="token keyword">return</span> reg<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token comment">//...</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br></div></div><h3 id="水波纹指令"><a href="#水波纹指令" aria-hidden="true" class="header-anchor">#</a> 水波纹指令</h3> <p>封装水波纹指令，用于给按钮添加点击水波纹特效</p> <p>水波纹指令主要实现</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token string">'./waves.css'</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  <span class="token function">bind</span> <span class="token punctuation">(</span><span class="token parameter">el<span class="token punctuation">,</span> binding</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    el<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token parameter">e</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> customOpts <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> binding<span class="token punctuation">.</span>value<span class="token punctuation">)</span>
      <span class="token keyword">const</span> opts <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        ele<span class="token punctuation">:</span> el<span class="token punctuation">,</span> <span class="token comment">// 波纹作用元素</span>
        type<span class="token punctuation">:</span> <span class="token string">'hit'</span><span class="token punctuation">,</span> <span class="token comment">// hit点击位置扩散center中心点扩展</span>
        color<span class="token punctuation">:</span> <span class="token string">'rgba(0, 0, 0, 0.15)'</span> <span class="token comment">// 波纹颜色</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span> customOpts<span class="token punctuation">)</span>
      <span class="token keyword">const</span> target <span class="token operator">=</span> opts<span class="token punctuation">.</span>ele
      <span class="token keyword">if</span> <span class="token punctuation">(</span>target<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        target<span class="token punctuation">.</span>style<span class="token punctuation">.</span>position <span class="token operator">=</span> <span class="token string">'relative'</span>
        target<span class="token punctuation">.</span>style<span class="token punctuation">.</span>overflow <span class="token operator">=</span> <span class="token string">'hidden'</span>
        <span class="token keyword">const</span> rect <span class="token operator">=</span> target<span class="token punctuation">.</span><span class="token function">getBoundingClientRect</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
        <span class="token keyword">let</span> ripple <span class="token operator">=</span> target<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'.waves-ripple'</span><span class="token punctuation">)</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>ripple<span class="token punctuation">)</span> <span class="token punctuation">{</span>
          ripple <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'span'</span><span class="token punctuation">)</span>
          ripple<span class="token punctuation">.</span>className <span class="token operator">=</span> <span class="token string">'waves-ripple'</span>
          ripple<span class="token punctuation">.</span>style<span class="token punctuation">.</span>height <span class="token operator">=</span> ripple<span class="token punctuation">.</span>style<span class="token punctuation">.</span>width <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">max</span><span class="token punctuation">(</span>rect<span class="token punctuation">.</span>width<span class="token punctuation">,</span> rect<span class="token punctuation">.</span>height<span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'px'</span>
          target<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>ripple<span class="token punctuation">)</span>
        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
          ripple<span class="token punctuation">.</span>className <span class="token operator">=</span> <span class="token string">'waves-ripple'</span>
        <span class="token punctuation">}</span>
        <span class="token keyword">switch</span> <span class="token punctuation">(</span>opts<span class="token punctuation">.</span>type<span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token keyword">case</span> <span class="token string">'center'</span><span class="token punctuation">:</span>
            ripple<span class="token punctuation">.</span>style<span class="token punctuation">.</span>top <span class="token operator">=</span> <span class="token punctuation">(</span>rect<span class="token punctuation">.</span>height <span class="token operator">/</span> <span class="token number">2</span> <span class="token operator">-</span> ripple<span class="token punctuation">.</span>offsetHeight <span class="token operator">/</span> <span class="token number">2</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'px'</span>
            ripple<span class="token punctuation">.</span>style<span class="token punctuation">.</span>left <span class="token operator">=</span> <span class="token punctuation">(</span>rect<span class="token punctuation">.</span>width <span class="token operator">/</span> <span class="token number">2</span> <span class="token operator">-</span> ripple<span class="token punctuation">.</span>offsetWidth <span class="token operator">/</span> <span class="token number">2</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'px'</span>
            <span class="token keyword">break</span>
          <span class="token keyword">default</span><span class="token punctuation">:</span>
            ripple<span class="token punctuation">.</span>style<span class="token punctuation">.</span>top <span class="token operator">=</span> <span class="token punctuation">(</span>e<span class="token punctuation">.</span>pageY <span class="token operator">-</span> rect<span class="token punctuation">.</span>top <span class="token operator">-</span> ripple<span class="token punctuation">.</span>offsetHeight <span class="token operator">/</span> <span class="token number">2</span> <span class="token operator">-</span> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>scrollTop<span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'px'</span>
            ripple<span class="token punctuation">.</span>style<span class="token punctuation">.</span>left <span class="token operator">=</span> <span class="token punctuation">(</span>e<span class="token punctuation">.</span>pageX <span class="token operator">-</span> rect<span class="token punctuation">.</span>left <span class="token operator">-</span> ripple<span class="token punctuation">.</span>offsetWidth <span class="token operator">/</span> <span class="token number">2</span> <span class="token operator">-</span> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>scrollLeft<span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'px'</span>
        <span class="token punctuation">}</span>
        ripple<span class="token punctuation">.</span>style<span class="token punctuation">.</span>backgroundColor <span class="token operator">=</span> opts<span class="token punctuation">.</span>color
        ripple<span class="token punctuation">.</span>className <span class="token operator">=</span> <span class="token string">'waves-ripple z-active'</span>
        <span class="token keyword">return</span> <span class="token boolean">false</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br></div></div><p>导出，将此js再main中引入可以自动引用，也可以使用自定义插件进行引入</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> waves <span class="token keyword">from</span> <span class="token string">'./waves'</span>

<span class="token keyword">const</span> <span class="token function-variable function">install</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">Vue</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  Vue<span class="token punctuation">.</span><span class="token function">directive</span><span class="token punctuation">(</span><span class="token string">'waves'</span><span class="token punctuation">,</span> waves<span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token keyword">if</span> <span class="token punctuation">(</span>window<span class="token punctuation">.</span>Vue<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  window<span class="token punctuation">.</span>waves <span class="token operator">=</span> waves
  Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>install<span class="token punctuation">)</span> <span class="token comment">// eslint-disable-line</span>
<span class="token punctuation">}</span>

waves<span class="token punctuation">.</span>install <span class="token operator">=</span> install
<span class="token keyword">export</span> <span class="token keyword">default</span> waves

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><h2 id="_3-富文本"><a href="#_3-富文本" aria-hidden="true" class="header-anchor">#</a> 3.富文本</h2> <p>富文本这里采用一个插件<a href="https://www.tiny.cloud/docs/" target="_blank" rel="noopener noreferrer">Tinymce<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>,这里采取自己封装的方式来实用，可以更加灵活和自如。</p> <h3 id="常见的富文本"><a href="#常见的富文本" aria-hidden="true" class="header-anchor">#</a> 常见的富文本</h3> <ul><li><p><a href="https://github.com/quilljs/quill" target="_blank" rel="noopener noreferrer">quill<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 图片操作不太友善。但是简单易使用</p></li> <li><p><a href="https://surmon-china.github.io/vue-quill-editor/" target="_blank" rel="noopener noreferrer">vue-quill-editor<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 基于quill的vue插件，可以尝试。</p></li> <li><p><a href="http://www.wangeditor.com/" target="_blank" rel="noopener noreferrer">wangEditor<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 一个国人开发的编辑器，简单易用</p></li> <li><p><a href="https://ckeditor.com/ckeditor-5/" target="_blank" rel="noopener noreferrer">ckeditor<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> <code>ckeditor</code> 也是一家老牌做富文本的公司。5.0版本最新，长相也挺好看。</p></li> <li><p><a href="https://github.com/fex-team/ueditor" target="_blank" rel="noopener noreferrer">百度 UEditor<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 又丑又难用。不推荐，实在要用推荐使用第三方库<code>vue-ueditor-wrap</code></p></li> <li><p><a href="https://github.com/HaoChuan9421/vue-ueditor-wrap" target="_blank" rel="noopener noreferrer">vue-ueditor-wrap<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 基于vue封装的组件，相对配置简单，修复了一些bug.</p></li></ul> <h3 id="tinymce"><a href="#tinymce" aria-hidden="true" class="header-anchor">#</a> Tinymce</h3> <p>这里来简单讲一下在自己项目中使用 <code>Tinymce</code> 的方法。</p> <p>首先，去官网下载最新的插件资源包，并放置在<code>public/static/tinymce</code> 文件夹下，并在<code>index.html</code>入口处添加全局引用</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code>    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>&lt;%= BASE_URL %&gt;static/tinymce/tinymce.min.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><div class="tip custom-block"><p class="custom-block-title">TIP</p> <p>由于目前使用 <code>npm</code> 安装 <code>Tinymce</code> 方法比较负责复杂而且还有一些问题(日后可能会采用该模式)且会大大增加编译的时间所以暂时不准备采用。👾</p></div> <p><strong>使用</strong>: 由于富文本不适合双向数据流，所以只会 <code>watch</code> 传入富文本的内容一次变化，之后传入内容的变化就不会再监听了，如果之后还有改变富文本内容的需求。</p> <p>可以通过 <code>this.refs.xxx.setContent()</code> 手动来设置。</p> <p>源码也很简单，有任何别的需求都可以在<a href="https://github.com/wangbin3162/vue-admin/tree/master/src/components/Tinymce/index.vue" target="_blank" rel="noopener noreferrer">@/components/Tinymce<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 中自行修改。</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tinymce</span> <span class="token attr-name">:height</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>400<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>content<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tinymce</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h3 id="tinymce-vue"><a href="#tinymce-vue" aria-hidden="true" class="header-anchor">#</a> tinymce-vue</h3> <p><code>tinymce</code> 官方也在之前发布了 <code>vue</code> 版本的<a href="https://github.com/tinymce/tinymce-vue" target="_blank" rel="noopener noreferrer">tinymce-vue<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>，帮你封装好了很多东西，但同时也相对的减少了灵活性，有兴趣的可以自行研究一下。</p> <h2 id="_4-components基础组件"><a href="#_4-components基础组件" aria-hidden="true" class="header-anchor">#</a> 4.components基础组件</h2> <h3 id="buttonbar"><a href="#buttonbar" aria-hidden="true" class="header-anchor">#</a> ButtonBar</h3> <p>按钮组，封装了增删改查4个按钮，具体查看源码
<a href="https://github.com/wangbin3162/vue-admin/tree/master/src/components/ButtonBar/index.vue" target="_blank" rel="noopener noreferrer">ButtonBar<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p> <p><img src="" alt="An Image"></p> <h3 id="charts"><a href="#charts" aria-hidden="true" class="header-anchor">#</a> Charts</h3> <p>示例演示封装图表组件
<a href="https://github.com/wangbin3162/vue-admin/tree/master/src/components/Charts" target="_blank" rel="noopener noreferrer">Charts<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p> <p>四个示例图表，即为首页展示区下方显示的图表</p> <p><img src="/vue-admin/doc/assets/img/charts.f77a030e.png" alt="An Image"></p> <h3 id="divider"><a href="#divider" aria-hidden="true" class="header-anchor">#</a> Divider</h3> <p>分割线标题组件<a href="https://github.com/wangbin3162/vue-admin/tree/master/src/components/Divider/Divider.vue" target="_blank" rel="noopener noreferrer">Divider<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>divider</span><span class="token punctuation">&gt;</span></span>居中标题<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>divider</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>divider</span> <span class="token attr-name">orientation</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>left<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>居左标题<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>divider</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>divider</span> <span class="token attr-name">orientation</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>right<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>居右标题<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>divider</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>显示如下:
<img src="" alt="An Image"></p> <h3 id="drawer"><a href="#drawer" aria-hidden="true" class="header-anchor">#</a> Drawer</h3> <p>抽屉组件，分为抽屉容器<a href="https://github.com/wangbin3162/vue-admin/tree/master/src/components/Drawer/Drawer.vue" target="_blank" rel="noopener noreferrer">Drawer<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>,
和抽屉内容<a href="https://github.com/wangbin3162/vue-admin/tree/master/src/components/Drawer/DrawerBox.vue" target="_blank" rel="noopener noreferrer">DrawerBox<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p> <div class="language-html line-numbers-mode"><pre class="language-html"><code> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>drawer</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>dialogFormVisible<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:status</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>dialogStatus<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:btn-status</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>btnStatus<span class="token punctuation">&quot;</span></span>
            <span class="token attr-name">@on-create</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>createData<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@on-update</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>updateData<span class="token punctuation">&quot;</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>60%<span class="token punctuation">&quot;</span></span> <span class="token attr-name">mask-close</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>drawer-box</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>dialogStatus!=='check'<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>edit<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token comment">&lt;!--...--&gt;</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>drawer-box</span><span class="token punctuation">&gt;</span></span>
      <span class="token comment">&lt;!--查看显示列表--&gt;</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>drawer-box</span> <span class="token attr-name">v-else</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>display<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-row</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>24<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>v-label</span> <span class="token attr-name">blod</span><span class="token punctuation">&gt;</span></span>商品名称<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>v-label</span><span class="token punctuation">&gt;</span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>v-label</span><span class="token punctuation">&gt;</span></span>{{ goods.name }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>v-label</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-col</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-row</span><span class="token punctuation">&gt;</span></span>
          <span class="token comment">&lt;!--...--&gt;</span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>drawer-box</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><p>分析，drawer抽屉包含主体布局，包括头部，底部按钮操作，遮罩层<code>mask-close</code>等，用于组装基本的抽屉，如下</p> <p><img src="/vue-admin/doc/assets/img/drawer.ab494944.png" alt="An Image"></p> <p>其中 <code>width</code>参数为抽屉宽度百分比，默认撑满父容器，如设置小于100%则会生成一个遮罩层，开启 <code>mask-close</code>可以开启点击遮罩层关闭抽屉。</p> <p>抽屉容器则比较简单，只是根据类型不同包裹不同的样式</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>drawer-box</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>dialogStatus!=='check'<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>edit<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token comment">&lt;!--嵌套的表格--&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>drawer-box</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p><code>type</code>属性默认为view，为view时则显示表格显示数据，具体显示见下方label使用嵌套，则会显示出类似下图的效果:</p> <p><img src="/vue-admin/doc/assets/img/drawer-box-view.3d5421e1.png" alt="An Image"></p> <p>多行列表可以借助<code>element-ui</code>中的<code>el-row</code>，<code>el-col</code>来灵活拼装</p> <h3 id="label"><a href="#label" aria-hidden="true" class="header-anchor">#</a> Label</h3> <p>文本组件<a href="https://github.com/wangbin3162/vue-admin/tree/master/src/components/Label/Label.vue" target="_blank" rel="noopener noreferrer">Label<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>,此组件仅用于显示在抽屉组件中的
显示列表中使用</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code>  <span class="token comment">&lt;!--...--&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>drawer-box</span> <span class="token attr-name">v-else</span><span class="token punctuation">&gt;</span></span>
     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>display<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-row</span><span class="token punctuation">&gt;</span></span>
         <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>24<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
           <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>v-label</span> <span class="token attr-name">blod</span><span class="token punctuation">&gt;</span></span>商品名称<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>v-label</span><span class="token punctuation">&gt;</span></span>
           <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>v-label</span><span class="token punctuation">&gt;</span></span>{{ goods.name }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>v-label</span><span class="token punctuation">&gt;</span></span>
         <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-col</span><span class="token punctuation">&gt;</span></span>
       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-row</span><span class="token punctuation">&gt;</span></span>
       <span class="token comment">&lt;!--...--&gt;</span>
     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>drawer-box</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h3 id="scrollpane"><a href="#scrollpane" aria-hidden="true" class="header-anchor">#</a> ScrollPane</h3> <p>滚动组件<a href="https://github.com/wangbin3162/vue-admin/tree/master/src/components/ScrollPane/index.vue" target="_blank" rel="noopener noreferrer">ScrollPane<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p> <p><code>TagsView.vue</code>中使用，主要是超出宽度页签可以滚动显示</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>scroll-pane</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>tags-view-wrapper<span class="token punctuation">'</span></span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>scrollPane<span class="token punctuation">'</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!--...--&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>scroll-pane</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>显示如下:</p> <p><img src="" alt="An Image"></p> <h3 id="splitpane"><a href="#splitpane" aria-hidden="true" class="header-anchor">#</a> SplitPane</h3> <p>可调节组件<a href="https://github.com/wangbin3162/vue-admin/tree/master/src/components/SplitPane/index.vue" target="_blank" rel="noopener noreferrer">SplitPane<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p> <p>这部分不做详细说明，请参考源码，效果如下:</p> <p><img src="" alt="An Image"></p> <h3 id="titlebar"><a href="#titlebar" aria-hidden="true" class="header-anchor">#</a> TitleBar</h3> <p>标题组件<a href="https://github.com/wangbin3162/vue-admin/tree/master/src/components/TitleBar/index.vue" target="_blank" rel="noopener noreferrer">TitleBar<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p> <div class="language-html line-numbers-mode"><pre class="language-html"><code>   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title-bar</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>标题文字<span class="token punctuation">&quot;</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>icon-funnelplot<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title-bar</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p><img src="" alt="An Image"></p> <h3 id="layout"><a href="#layout" aria-hidden="true" class="header-anchor">#</a> Layout</h3> <p>布局基础组件<a href="https://github.com/wangbin3162/vue-admin/tree/master/src/components/Layout/Layout.vue" target="_blank" rel="noopener noreferrer">Layout<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>，
封装右侧<code>main-box</code>中的内容模块，其中主要封装了
<a href="https://github.com/wangbin3162/vue-admin/tree/master/src/components/Layout/TreeBar/TreeBar.vue" target="_blank" rel="noopener noreferrer">TreeBar<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>，树容器
<a href="https://github.com/wangbin3162/vue-admin/tree/master/src/components/Layout/FilterBar" target="_blank" rel="noopener noreferrer">FilterBar<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>，查询条件
<a href="https://github.com/wangbin3162/vue-admin/tree/master/src/components/Layout/ContentBox" target="_blank" rel="noopener noreferrer">ContentBox<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>，内容显示等基础组件</p> <p>具体请参考源码，使用时引入<code>Layout.vue</code>即可自动拼装一个有基本布局的内容</p> <p><img src="/vue-admin/doc/assets/img/table03.a4b02882.png" alt="An Image"></p></div> <div class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated: </span> <span class="time">7/15/2019, 3:53:38 PM</span></div></div> <div class="page-nav"><p class="inner"><span class="prev">
        ←
        <a href="/vue-admin/doc/guide/start.html" class="prev">
          二、开始实现
        </a></span> <span class="next"><a href="/vue-admin/doc/guide/third.html">
          四、第三方库
        </a>
        →
      </span></p></div> </div> <!----></div></div>
    <script src="/vue-admin/doc/assets/js/app.d64942cb.js" defer></script><script src="/vue-admin/doc/assets/js/2.abdc0c9d.js" defer></script>
  </body>
</html>
